<template>
  <div class="distribution-statistics-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>配送统计</h2>
      <p>配送业务统计分析，包括配送效率、成本分析、客户满意度等</p>
    </div>

    <!-- 统计筛选区域 -->
    <el-card class="filter-card" shadow="never">
      <el-form :model="filterForm" :inline="true" class="filter-form">
        <el-form-item label="统计周期">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="配送区域">
          <el-select v-model="filterForm.region" placeholder="请选择区域" clearable style="width: 150px">
            <el-option label="全部区域" value="" />
            <el-option label="朝阳区" value="chaoyang" />
            <el-option label="海淀区" value="haidian" />
            <el-option label="西城区" value="xicheng" />
            <el-option label="东城区" value="dongcheng" />
            <el-option label="丰台区" value="fengtai" />
          </el-select>
        </el-form-item>
        <el-form-item label="车辆类型">
          <el-select v-model="filterForm.vehicleType" placeholder="请选择类型" clearable style="width: 150px">
            <el-option label="全部类型" value="" />
            <el-option label="小型货车" value="small" />
            <el-option label="中型货车" value="medium" />
            <el-option label="大型货车" value="large" />
            <el-option label="冷藏车" value="refrigerated" />
          </el-select>
        </el-form-item>
        <el-form-item label="司机">
          <el-select v-model="filterForm.driverId" placeholder="请选择司机" clearable style="width: 150px">
            <el-option label="全部司机" value="" />
            <el-option label="张师傅" value="1" />
            <el-option label="李师傅" value="2" />
            <el-option label="王师傅" value="3" />
            <el-option label="赵师傅" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter" :icon="Search">查询</el-button>
          <el-button @click="handleReset" :icon="Refresh">重置</el-button>
          <el-button type="success" @click="handleExport" :icon="Download">导出报表</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- KPI指标卡片 -->
    <el-row :gutter="20" class="kpi-row">
      <el-col :span="6">
        <el-card class="kpi-card" shadow="hover">
          <div class="kpi-content">
            <div class="kpi-icon delivery">
              <el-icon><Van /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">{{ kpiData.totalOrders }}</div>
              <div class="kpi-label">总配送单数</div>
              <div class="kpi-trend positive">+12.5%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="kpi-card" shadow="hover">
          <div class="kpi-content">
            <div class="kpi-icon efficiency">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">{{ kpiData.avgDeliveryTime }}</div>
              <div class="kpi-label">平均配送时长(小时)</div>
              <div class="kpi-trend negative">-8.3%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="kpi-card" shadow="hover">
          <div class="kpi-content">
            <div class="kpi-icon cost">
              <el-icon><Money /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">¥{{ kpiData.totalCost }}</div>
              <div class="kpi-label">总配送成本</div>
              <div class="kpi-trend positive">+5.2%</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="kpi-card" shadow="hover">
          <div class="kpi-content">
            <div class="kpi-icon satisfaction">
              <el-icon><Star /></el-icon>
            </div>
            <div class="kpi-info">
              <div class="kpi-value">{{ kpiData.satisfaction }}%</div>
              <div class="kpi-label">客户满意度</div>
              <div class="kpi-trend positive">+2.1%</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 配送趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>配送趋势分析</span>
              <el-radio-group v-model="trendPeriod" size="small">
                <el-radio-button label="week">近7天</el-radio-button>
                <el-radio-button label="month">近30天</el-radio-button>
                <el-radio-button label="quarter">近3个月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="trendChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 配送效率分析 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <span>配送效率分析</span>
          </template>
          <div ref="efficiencyChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 成本构成分析 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <span>成本构成分析</span>
          </template>
          <div ref="costChartRef" class="chart-container"></div>
        </el-card>
      </el-col>

      <!-- 区域配送分布 -->
      <el-col :span="12">
        <el-card class="chart-card" shadow="never">
          <template #header>
            <span>区域配送分布</span>
          </template>
          <div ref="regionChartRef" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细统计表格 -->
    <el-card class="table-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>详细统计数据</span>
          <div class="header-actions">
            <el-button type="primary" size="small" @click="handleRefresh" :icon="Refresh">刷新</el-button>
          </div>
        </div>
      </template>

      <el-tabs v-model="activeTab" class="statistics-tabs">
        <!-- 司机统计 -->
        <el-tab-pane label="司机统计" name="driver">
          <el-table :data="driverStats" border stripe>
            <el-table-column prop="driverName" label="司机姓名" width="120" />
            <el-table-column prop="vehicleNo" label="车牌号" width="120" />
            <el-table-column prop="totalOrders" label="配送单数" width="100" />
            <el-table-column prop="totalDistance" label="总里程(km)" width="120" />
            <el-table-column prop="avgDeliveryTime" label="平均配送时长" width="130" />
            <el-table-column prop="onTimeRate" label="准时率" width="100">
              <template #default="{ row }">
                <el-progress :percentage="row.onTimeRate" :color="getProgressColor(row.onTimeRate)" :stroke-width="8" />
              </template>
            </el-table-column>
            <el-table-column prop="fuelCost" label="油费成本(元)" width="120" />
            <el-table-column prop="satisfaction" label="客户评分" width="100">
              <template #default="{ row }">
                <el-rate v-model="row.satisfaction" disabled show-score text-color="#ff9900" />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="row.status === 'active' ? 'success' : 'info'" size="small">
                  {{ row.status === 'active' ? '在岗' : '休息' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 车辆统计 -->
        <el-tab-pane label="车辆统计" name="vehicle">
          <el-table :data="vehicleStats" border stripe>
            <el-table-column prop="vehicleNo" label="车牌号" width="120" />
            <el-table-column prop="vehicleType" label="车辆类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getVehicleTypeColor(row.vehicleType)" size="small">
                  {{ getVehicleTypeText(row.vehicleType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="totalOrders" label="配送单数" width="100" />
            <el-table-column prop="totalDistance" label="总里程(km)" width="120" />
            <el-table-column prop="utilizationRate" label="利用率" width="100">
              <template #default="{ row }">
                <el-progress :percentage="row.utilizationRate" :color="getProgressColor(row.utilizationRate)" :stroke-width="8" />
              </template>
            </el-table-column>
            <el-table-column prop="fuelConsumption" label="油耗(L/100km)" width="130" />
            <el-table-column prop="maintenanceCost" label="维护成本(元)" width="120" />
            <el-table-column prop="avgLoadRate" label="平均载重率" width="120">
              <template #default="{ row }">
                <el-progress :percentage="row.avgLoadRate" :color="getProgressColor(row.avgLoadRate)" :stroke-width="8" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 客户统计 -->
        <el-tab-pane label="客户统计" name="customer">
          <el-table :data="customerStats" border stripe>
            <el-table-column prop="customerName" label="客户名称" width="150" />
            <el-table-column prop="region" label="配送区域" width="100" />
            <el-table-column prop="totalOrders" label="配送单数" width="100" />
            <el-table-column prop="totalAmount" label="配送金额(元)" width="120" />
            <el-table-column prop="avgDeliveryTime" label="平均配送时长" width="130" />
            <el-table-column prop="onTimeRate" label="准时率" width="100">
              <template #default="{ row }">
                <el-progress :percentage="row.onTimeRate" :color="getProgressColor(row.onTimeRate)" :stroke-width="8" />
              </template>
            </el-table-column>
            <el-table-column prop="satisfaction" label="满意度评分" width="120">
              <template #default="{ row }">
                <el-rate v-model="row.satisfaction" disabled show-score text-color="#ff9900" />
              </template>
            </el-table-column>
            <el-table-column prop="complaintCount" label="投诉次数" width="100">
              <template #default="{ row }">
                <el-tag :type="row.complaintCount > 0 ? 'danger' : 'success'" size="small">
                  {{ row.complaintCount }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 时段统计 -->
        <el-tab-pane label="时段统计" name="time">
          <el-table :data="timeStats" border stripe>
            <el-table-column prop="timeSlot" label="时间段" width="120" />
            <el-table-column prop="orderCount" label="配送单数" width="100" />
            <el-table-column prop="avgDeliveryTime" label="平均配送时长" width="130" />
            <el-table-column prop="onTimeRate" label="准时率" width="100">
              <template #default="{ row }">
                <el-progress :percentage="row.onTimeRate" :color="getProgressColor(row.onTimeRate)" :stroke-width="8" />
              </template>
            </el-table-column>
            <el-table-column prop="trafficIndex" label="交通拥堵指数" width="130" />
            <el-table-column prop="fuelCostPerKm" label="每公里油费(元)" width="130" />
            <el-table-column prop="efficiency" label="配送效率" width="100">
              <template #default="{ row }">
                <el-tag :type="getEfficiencyType(row.efficiency)" size="small">
                  {{ row.efficiency }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Search,
  Refresh,
  Download,
  Van,
  Timer,
  Money,
  Star
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const activeTab = ref('driver')
const trendPeriod = ref('week')
const trendChartRef = ref(null)
const efficiencyChartRef = ref(null)
const costChartRef = ref(null)
const regionChartRef = ref(null)

// 筛选表单
const filterForm = reactive({
  dateRange: [],
  region: '',
  vehicleType: '',
  driverId: ''
})

// KPI数据
const kpiData = reactive({
  totalOrders: 1248,
  avgDeliveryTime: 2.3,
  totalCost: 45680,
  satisfaction: 96.8
})

// 司机统计数据
const driverStats = ref([
  {
    driverName: '张师傅',
    vehicleNo: '京A12345',
    totalOrders: 156,
    totalDistance: 2340,
    avgDeliveryTime: '2.1小时',
    onTimeRate: 95,
    fuelCost: 3200,
    satisfaction: 4.8,
    status: 'active'
  },
  {
    driverName: '李师傅',
    vehicleNo: '京B67890',
    totalOrders: 142,
    totalDistance: 1980,
    avgDeliveryTime: '2.3小时',
    onTimeRate: 92,
    fuelCost: 2850,
    satisfaction: 4.6,
    status: 'active'
  },
  {
    driverName: '王师傅',
    vehicleNo: '京C11111',
    totalOrders: 98,
    totalDistance: 1560,
    avgDeliveryTime: '2.8小时',
    onTimeRate: 88,
    fuelCost: 2400,
    satisfaction: 4.3,
    status: 'rest'
  },
  {
    driverName: '赵师傅',
    vehicleNo: '京D22222',
    totalOrders: 134,
    totalDistance: 2100,
    avgDeliveryTime: '2.2小时',
    onTimeRate: 94,
    fuelCost: 3100,
    satisfaction: 4.7,
    status: 'active'
  }
])

// 车辆统计数据
const vehicleStats = ref([
  {
    vehicleNo: '京A12345',
    vehicleType: 'medium',
    totalOrders: 156,
    totalDistance: 2340,
    utilizationRate: 85,
    fuelConsumption: 12.5,
    maintenanceCost: 1200,
    avgLoadRate: 78
  },
  {
    vehicleNo: '京B67890',
    vehicleType: 'small',
    totalOrders: 142,
    totalDistance: 1980,
    utilizationRate: 82,
    fuelConsumption: 9.8,
    maintenanceCost: 800,
    avgLoadRate: 72
  },
  {
    vehicleNo: '京C11111',
    vehicleType: 'large',
    totalOrders: 98,
    totalDistance: 1560,
    utilizationRate: 65,
    fuelConsumption: 18.2,
    maintenanceCost: 2000,
    avgLoadRate: 68
  },
  {
    vehicleNo: '京D22222',
    vehicleType: 'refrigerated',
    totalOrders: 134,
    totalDistance: 2100,
    utilizationRate: 80,
    fuelConsumption: 15.5,
    maintenanceCost: 1500,
    avgLoadRate: 75
  }
])

// 客户统计数据
const customerStats = ref([
  {
    customerName: '华润万家',
    region: '朝阳区',
    totalOrders: 45,
    totalAmount: 125000,
    avgDeliveryTime: '2.1小时',
    onTimeRate: 96,
    satisfaction: 4.8,
    complaintCount: 0
  },
  {
    customerName: '沃尔玛',
    region: '海淀区',
    totalOrders: 38,
    totalAmount: 98000,
    avgDeliveryTime: '2.3小时',
    onTimeRate: 94,
    satisfaction: 4.6,
    complaintCount: 1
  },
  {
    customerName: '家乐福',
    region: '西城区',
    totalOrders: 32,
    totalAmount: 78000,
    avgDeliveryTime: '2.0小时',
    onTimeRate: 97,
    satisfaction: 4.9,
    complaintCount: 0
  },
  {
    customerName: '大润发',
    region: '丰台区',
    totalOrders: 28,
    totalAmount: 65000,
    avgDeliveryTime: '2.5小时',
    onTimeRate: 91,
    satisfaction: 4.4,
    complaintCount: 2
  }
])

// 时段统计数据
const timeStats = ref([
  {
    timeSlot: '08:00-10:00',
    orderCount: 85,
    avgDeliveryTime: '1.8小时',
    onTimeRate: 98,
    trafficIndex: 3.2,
    fuelCostPerKm: 0.85,
    efficiency: '高'
  },
  {
    timeSlot: '10:00-12:00',
    orderCount: 120,
    avgDeliveryTime: '2.1小时',
    onTimeRate: 95,
    trafficIndex: 4.1,
    fuelCostPerKm: 0.92,
    efficiency: '高'
  },
  {
    timeSlot: '12:00-14:00',
    orderCount: 95,
    avgDeliveryTime: '2.3小时',
    onTimeRate: 92,
    trafficIndex: 4.8,
    fuelCostPerKm: 1.05,
    efficiency: '中'
  },
  {
    timeSlot: '14:00-16:00',
    orderCount: 110,
    avgDeliveryTime: '2.0小时',
    onTimeRate: 96,
    trafficIndex: 3.8,
    fuelCostPerKm: 0.88,
    efficiency: '高'
  },
  {
    timeSlot: '16:00-18:00',
    orderCount: 88,
    avgDeliveryTime: '2.8小时',
    onTimeRate: 87,
    trafficIndex: 6.2,
    fuelCostPerKm: 1.25,
    efficiency: '低'
  },
  {
    timeSlot: '18:00-20:00',
    orderCount: 65,
    avgDeliveryTime: '3.2小时',
    onTimeRate: 82,
    trafficIndex: 7.1,
    fuelCostPerKm: 1.45,
    efficiency: '低'
  }
])

// 获取车辆类型颜色
const getVehicleTypeColor = (type) => {
  const colorMap = {
    small: 'success',
    medium: 'warning',
    large: 'danger',
    refrigerated: 'primary'
  }
  return colorMap[type] || 'info'
}

// 获取车辆类型文本
const getVehicleTypeText = (type) => {
  const textMap = {
    small: '小型货车',
    medium: '中型货车',
    large: '大型货车',
    refrigerated: '冷藏车'
  }
  return textMap[type] || '未知'
}

// 获取进度条颜色
const getProgressColor = (percentage) => {
  if (percentage >= 90) return '#67c23a'
  if (percentage >= 70) return '#e6a23c'
  return '#f56c6c'
}

// 获取效率类型
const getEfficiencyType = (efficiency) => {
  const typeMap = {
    '高': 'success',
    '中': 'warning',
    '低': 'danger'
  }
  return typeMap[efficiency] || 'info'
}

// 初始化配送趋势图
const initTrendChart = () => {
  const chart = echarts.init(trendChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['配送单数', '准时率']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: [
      {
        type: 'value',
        name: '配送单数',
        position: 'left'
      },
      {
        type: 'value',
        name: '准时率(%)',
        position: 'right',
        min: 80,
        max: 100
      }
    ],
    series: [
      {
        name: '配送单数',
        type: 'bar',
        data: [45, 52, 48, 61, 55, 38, 42],
        itemStyle: {
          color: '#409eff'
        }
      },
      {
        name: '准时率',
        type: 'line',
        yAxisIndex: 1,
        data: [95, 92, 96, 89, 94, 97, 93],
        itemStyle: {
          color: '#67c23a'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化配送效率图
const initEfficiencyChart = () => {
  const chart = echarts.init(efficiencyChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['平均配送时长', '平均距离']
    },
    xAxis: {
      type: 'category',
      data: ['张师傅', '李师傅', '王师傅', '赵师傅']
    },
    yAxis: [
      {
        type: 'value',
        name: '时长(小时)',
        position: 'left'
      },
      {
        type: 'value',
        name: '距离(km)',
        position: 'right'
      }
    ],
    series: [
      {
        name: '平均配送时长',
        type: 'bar',
        data: [2.1, 2.3, 2.8, 2.2],
        itemStyle: {
          color: '#e6a23c'
        }
      },
      {
        name: '平均距离',
        type: 'line',
        yAxisIndex: 1,
        data: [15, 14, 16, 16],
        itemStyle: {
          color: '#f56c6c'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化成本构成图
const initCostChart = () => {
  const chart = echarts.init(costChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['油费', '人工费', '维护费', '保险费', '其他']
    },
    series: [
      {
        name: '成本构成',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 18500, name: '油费' },
          { value: 15200, name: '人工费' },
          { value: 6800, name: '维护费' },
          { value: 3200, name: '保险费' },
          { value: 1980, name: '其他' }
        ]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化区域分布图
const initRegionChart = () => {
  const chart = echarts.init(regionChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['朝阳区', '海淀区', '西城区', '东城区', '丰台区']
    },
    yAxis: {
      type: 'value',
      name: '配送单数'
    },
    series: [
      {
        name: '配送单数',
        type: 'bar',
        data: [156, 142, 98, 134, 118],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  }
  chart.setOption(option)
}

// 筛选
const handleFilter = () => {
  ElMessage.success('筛选条件已应用')
  // 这里可以根据筛选条件重新加载数据
}

// 重置
const handleReset = () => {
  Object.assign(filterForm, {
    dateRange: [],
    region: '',
    vehicleType: '',
    driverId: ''
  })
  ElMessage.info('筛选条件已重置')
}

// 导出报表
const handleExport = () => {
  ElMessage.success('报表导出功能开发中...')
}

// 刷新
const handleRefresh = () => {
  ElMessage.success('数据已刷新')
  // 重新初始化图表
  nextTick(() => {
    initTrendChart()
    initEfficiencyChart()
    initCostChart()
    initRegionChart()
  })
}

// 初始化
onMounted(() => {
  // 设置默认日期范围为最近7天
  const today = new Date()
  const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
  filterForm.dateRange = [
    lastWeek.toISOString().split('T')[0],
    today.toISOString().split('T')[0]
  ]

  // 初始化图表
  nextTick(() => {
    initTrendChart()
    initEfficiencyChart()
    initCostChart()
    initRegionChart()
  })
})
</script>

<style scoped>
.distribution-statistics-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-form {
  margin-bottom: 0;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  height: 120px;
}

.kpi-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
}

.kpi-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.kpi-icon.delivery {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.kpi-icon.efficiency {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.kpi-icon.cost {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.kpi-icon.satisfaction {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.kpi-info {
  flex: 1;
}

.kpi-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  line-height: 1;
  margin-bottom: 5px;
}

.kpi-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.kpi-trend {
  font-size: 12px;
  font-weight: 500;
}

.kpi-trend.positive {
  color: #67c23a;
}

.kpi-trend.negative {
  color: #f56c6c;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 400px;
}

.chart-container {
  height: 320px;
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.table-card {
  margin-bottom: 20px;
}

.statistics-tabs {
  margin-top: 20px;
}

@media (max-width: 1200px) {
  .kpi-row .el-col {
    margin-bottom: 20px;
  }
  
  .chart-row .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .distribution-statistics-container {
    padding: 10px;
  }
  
  .filter-form {
    flex-direction: column;
  }
  
  .kpi-content {
    flex-direction: column;
    text-align: center;
    padding: 10px;
  }
  
  .kpi-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .chart-card {
    height: 300px;
  }
  
  .chart-container {
    height: 220px;
  }
}
</style>